<template>
	<view class="container">
		<view class="nav">
			<view class="close" @click="back">
				<image style="width: 100%;height: 100%;" src="https://dnsverify.pfmoto.com/appstatic/icon/close.png" mode=""></image>
			</view>
			<view class="title">
				视频
			</view>
			<view class="downLoad" @click="downLoad">
				<image style="width: 100%;height: 100%;" src="https://dnsverify.pfmoto.com/appstatic/icon/downLoad.png" mode=""></image>
			</view>
		</view>
		<view class="media-box">
			<video controls="false" style="width: 100%;height: 100%;" :src="src"></video>
		</view>
		<view class="progress-box" v-if="showProgress" >
			<u-line-progress :percent="percentCurrent" activeColor="#FFD700" show-percent show-info stroke-width="3" active   />
		</view>
	</view>
</template>

<script>
	// pages/discover/choicenessCategoryList/mediaList/mediaList.js
	const app = getApp();
	const util = require("../../../../utils/util.js");
	const network = require("../../../../manager/network-manager.js");
	const dialog = require("../../../../utils/dialog.js");

	export default {
		data() {
			return {
				src: '',
				showProgress:false,
				downloadTask:null,
				percentCurrent: 0,//下载进度百分比
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log(options, 'options');
			this.src = options.src
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onPullDownRefresh() {
			this.reloadData();
		},

		onReachBottom: function() {

		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			back() {
				if(this.downloadTask!=null){
					this.downloadTask.abort();
				}
				uni.navigateBack()
			},
			downLoad() {
				console.log(this.src);
				var that = this;
				this.showProgress = true;
				this.downloadTask = uni.downloadFile({
					url: this.src,
					success: (res) => {
						console.log(res, 'success')
						if (res.statusCode === 200) {
							that.showProgress = false;
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail(err) {
						that.showProgress = false;
						console.log('下载失败', err)
					}
				});
				var that = this;
				//下载的回调 不要都用res  要换一个使用 方便区分
				this.downloadTask.onProgressUpdate(red => {
					let that = this;
					console.log(red.progress,'progress')
					if(that.percentCurrent!=red.progress){
						that.percentCurrent = red.progress;
					}

					console.log(that.percentCurrent);
					// if (red.progress === 100) {
					// 	uni.showToast({
					// 		title: '下载完成！',
					// 		icon: 'success',
					// 		duration: 2000,
					// 		position: 'top'
					// 	});
					// 	//当进程全部下载完成之后 在执行保存到相册的回调
					// 	uni.saveImageToPhotosAlbum({
					// 		filePath: res.tempFilePath, //注意这里是res 不是red
					// 		success: ()=> {
					// 			uni.showToast({
					// 				title: '下载成功',
					// 				icon: 'none'
					// 			});
					// 		},
					// 		fail: ()=> {
					// 			uni.showToast({
					// 				title: '保存失败，请稍后重试',
					// 				icon: 'none'
					// 			});
					// 		}
					// 	});
					// }
				});
			}
		}
	};
</script>

<style>
	.close {
		width: 32rpx;
		height: 32rpx;
	}

	.downLoad {
		width: 32rpx;
		height: 32rpx;
	}

	.container {
		background-color: #333;
		height: 100vh;
		width: 100%;
		position: relative;
		color: #fff;
		font-weight: 500;
		font-size: 32rpx;
	}

	.media-box {
		height: 790rpx;
		width: 100%;
		background-color: yellow;
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
	}
	.progress-box{
		position: absolute;
		bottom: 100rpx;
		left: 60rpx;
		right: 60rpx;
	}
	.nav {
		padding: 62rpx 41rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
